<template>
  <div class="shxq" ref="main">
    <div class="shxq1">
      <img :src="shlist.picurl" alt="" />
    </div>
    <div class="cont">
      <div class="title">{{ shlist.shmc }}</div>
      <div class="r12">
        <span class="c_1">{{ shlist.codename }}</span>
        <van-tag style="margin-left: 0.625rem" text-color="#D19C4F" color=" #FFD19C4F">{{ shlist.areaname }}</van-tag>
      </div>
      <div class="jiben">
        <div class="jb">
          <img src="../../assets/images/dh.png" alt="" />
          <div class="dh">联系电话：{{ shlist.shTel }}</div>
        </div>
        <div class="jb1">
          <div class="jb2">
            <img src="../../assets/images/dz.png" alt="" />
            <div class="dh">地址：{{ shlist.shAddress }}</div>
          </div>
          <div class="jb3" @click="daohang()">
            <img src="../../assets/images/map.png" alt="" />
          </div>
        </div>
      </div>
      <div class="jianjie" v-if="shlist.shjj">
        <div class="jj">简介</div>
        <div class="jj1" v-html="shlist.shjj"></div>
      </div>
      <div class="sc">
        <div class="sc1">
          <img @click="shoucang(shlist.sfsc)" v-if="shlist.sfsc == 0" src="../../assets/images/my_sc1.png" alt="" />
          <img @click="quxiao(shlist.sfsc)" v-else src="../../assets/images/sc.png" alt="" />
        </div>
        <div class="sc1 sc2" @click.stop="onShare">
          <img src="../../assets/images/fx.png" alt="" />
        </div>
      </div>
      <div class="zy">
        <div class="jj" v-if="xgsp.length">主营商品</div>
        <section>
          <figure v-for="(item, index) in xgsp" :key="item.fyclassdataid" @click="tospxq(item.fyclassdataid)">
            <img :src="item.picurl" alt="" />
            <div class="goods_info">
              <div class="title">{{ item.spmc }}</div>
              <div class="price">
                <em>￥</em>
                <span>{{ item.spJiage }}</span>
              </div>
            </div>
          </figure>
        </section>
      </div>
    </div>
    <div class="page_bg" v-if="bankSwitch">
      <img src="../../assets/images/arrows.png" alt="">
      <div class="hint">请点击右上角菜单，进行分享</div>
    </div>
  </div>
</template>

<script>
import { getShList, postsc, postqxsc, postSaveVisit, getshare } from "@/api/api.js";
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import wx from "weixin-js-sdk";
export default {
  name: "",
  data() {
    return {
      id: 0,
      shlist: {},
      xgsp: [],
      yhlist: {},
      user: JSON.parse(localStorage.getItem('userlogin')),
      tm: '',
      bankSwitch: false,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.yhlist = JSON.parse(localStorage.getItem('userlogin'))
    this.shList();
    this.postSaveVisit()
  },
  components: {
  },
  mounted() {
    document.addEventListener("click", this.bodyCloseMenus);
  },
  methods: {
    bodyCloseMenus(e) {
      console.log(1111);
      let self = this;
      if (self.bankSwitch == true) {
        self.bankSwitch = false;
      }
    },
    onShare() {
      var broser = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配broser 中是否含有MicroMessenger字符串
      if (broser.match(/MicroMessenger/i) == 'micromessenger') {
        console.log('微信浏览器');
        this.bankSwitch = true
      } else {
        Toast('请使用微信浏览器打开!');
      }
    },
    async postSaveVisit() {  //浏览监听
      let res = await postSaveVisit({
        yhid: this.user.id || this.user.yhid,
        lx: 3
      })
    },
    //收藏
    async shoucang(item) {
      console.log('收藏===');
      if (localStorage.getItem('userlogin')) {
        let res = await postsc({
          yhid: this.yhlist.id || this.user.yhid,
          zyid: this.shlist.fyclassdataid,
          lx: 1

        })
        console.log('res==', res);
        if (res.data.code == 200) {
          console.log('1111113334');
          this.shlist.sfsc = 1
          Toast(res.data.msg);
        } else {
          Toast('操作失败');
        }

      } else {
        this.$router.push({ path: "/index", query: {} });
      }


    },
    //取消收藏
    async quxiao(ix) {
      if (localStorage.getItem('userlogin')) {
        let res = await postqxsc({
          yhid: this.yhlist.id || this.user.yhid,
          zyid: this.shlist.fyclassdataid,
          lx: 1

        })
        if (res.data.code == 200) {
          this.shlist.sfsc = 0
          Toast(res.data.msg);
        } else {
          Toast('操作失败');
        }

      } else {
        this.$router.push({ path: "/index", query: {} });
      }

    },

    async share() {
      console.log('0009999');
      let now = new Date();
      let timestamp = now.getTime();
      // console.log(timestamp);
      //获取url链接（如果有#需要这么获取）
      let url = encodeURIComponent(window.location.href.split("#")[0])
      //获取url链接（如果没有#需要这么获取）
      // let url = encodeURIComponent(window.location.href);
      await getshare({
        url: url
        // url: encodeURIComponent('https://jsc.wzfeiyi.cn/fygo')
      }).then(res => {
        console.log('分享===', res);
        this.tm = res.data.data.timestamp
        if (res.data.code == 200) {
          // alert(res.data.data.timestamp)
          console.log("***********************")
          console.log(res.data.data.timestamp)
          console.log(res.data.data.nonceStr)
          console.log(res.data.data.signature)
          console.log(res.data.data.url)
          console.log("***********************")
          wx.config({
            debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
            appId: 'wx77dec9047c8c94d9', // 必填，公众号的唯一标识
            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature, // 必填，签名
            jsApiList: [
              "updateAppMessageShareData",
              "updateTimelineShareData"
            ] // 必填，需要使用的 JS 接口列表
          });
          setTimeout(() => {
            console.log('this.tm', this.tm)
            wx.ready(() => {   //需在用户可能点击分享按钮前就先调用
              console.log('3332222');
              let shareData = {
                title: '温州非遗go', // 分享标题
                desc: '温州市线上体验购物平台', // 分享描述
                link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://sjk.zjich.cn/ImageData/loadImageData.page?ViewSize=large&DataOwner=GZ_SB_yangshenggouqiye_sh_pic&DataID=16', // 分享图标
              };
              //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
              wx.updateAppMessageShareData(shareData);
              //自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
              // wx.updateTimelineShareData(shareData);
            });
            wx.error(function (res) {
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
              console.log('1133344', res.errMsg)
            });
          }, 1000);

        }
      })


    },

    daohang() {
      //  window.location.href = `http://api.map.baidu.com/marker?location=30.16572,120.11062&title=浙江省非物质文化遗产馆&content=杭州市西湖区支路二恒大·澜玉水晶熙园西侧约140米&output=html`
      window.location.href = 'http://api.map.baidu.com/marker?location=' + this.shlist.shWeidu + ',' + this.shlist.shJingdu + '&title=' + this.shlist.shmc + '&content=' + this.shlist.shAddress + '&output=html'

    },
    tospxq(id) {
      this.$router.push({ path: "/goodsXq", query: { id: id } });
    },
    async shList() {
      let res = await getShList({
        id: this.id,
        yhid: this.yhlist.id ? this.yhlist.id : this.user.yhid ? this.user.yhid : ''
      });
      if (res.code == 200) {
        this.shlist = res.data.list[0];
        this.xgsp = res.data.list[0].spList;
        console.log(this.shlist, "0098987");
      }
    },
  },
  beforeDestroy() {
    document.removeEventListener("click", this.bodyCloseMenus);
  },
};
</script>
<style scoped lang="scss">
.shxq {
  width: 100%;
  position: relative;

  .shxq1 {
    width: 100%;

    img {
      width: 100%;
      height: 18.6875rem;
    }
  }

  .cont {
    position: relative;
    width: calc(100% - 0rem);
    // height: 33.1875rem;
    background: #ffffff;
    border-radius: 1rem 1rem 0px 0px;
    position: absolute;
    top: 17.5rem;
    left: 0;
    padding: 1.5625rem 0;

    .title {
      width: calc(100% - 2.5rem);
      font-size: 1.25rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 550;
      color: #333333;
      line-height: 1.8125rem;
      padding: 0 1.25rem;
    }

    .r12 {
      width: calc(100% - 2.5rem);
      //   padding-top: 0.625rem;
      padding: 0.625rem 1.25rem 0;

      .c_1 {
        color: #6caafe;
        background: rgba(108, 170, 254, 0.2);
        // margin-right: .5625rem;
        font-size: 0.75rem;
        padding: 0 0.2rem;
        border-radius: 0.125rem;
      }
    }

    .jiben {
      position: relative;
      width: calc(100% - 2.5rem);
      padding: 0 1.25rem 0;

      .jb {
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: 1.25rem;

        img {
          width: 0.6875rem;
          height: 0.6875rem;
        }

        .dh {
          font-size: 12px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: #666666;
          line-height: 18px;
          padding-left: 0.5rem;
        }
      }

      .jb1 {
        display: flex;
        // align-items: center;
        width: 100%;
        padding-top: 0.5625rem;

        .jb2 {
          display: flex;
          // align-items: center;
          width: 85%;

          img {
            width: 0.5625rem;
            height: 0.6875rem;
            padding-top: 0.3125rem;
          }

          .dh {
            font-size: 12px;
            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
            font-weight: 400;
            color: #666666;
            line-height: 1.125rem;
            padding-left: 0.5rem;
          }
        }

        .jb3 {
          width: 15%;
          display: flex;
          justify-content: center;
          padding-top: 0.25rem;

          img {
            width: 0.9375rem;
            height: 0.9375rem;
          }
        }
      }
    }

    .jianjie {
      width: calc(100% - 2.5rem);
      padding: 1.5rem 1.25rem 0;

      .jj {
        font-size: 1rem;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: #333333;
        line-height: 1.5rem;
      }

      .jj1 {
        padding-top: 0.6875rem;
        width: 100%;
        font-size: 0.75rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 1.25rem;
        text-align: justify;
      }
    }

    .zy {
      width: calc(100% - 0rem);

      //   padding: 1.5rem 1.25rem;
      .jj {
        width: calc(100% - 2.5rem);
        padding: 1.5rem 1.25rem 0;
        font-size: 1rem;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: #333333;
        line-height: 1.5rem;
      }

      section {
        margin: 0 auto;
        overflow: hidden;
        column-count: 2;
        column-gap: 0;
        margin-top: 0.8125rem;
        padding: 0 0.3125rem;
      }

      figure {
        margin: 0 0.5625rem 0.75rem;
        break-inside: avoid;
        background: #fff;
        border-radius: 0.5rem;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
      }

      figure {
        img {
          width: 100%;
          border-radius: 0.5rem 0.5rem 0 0;
          display: block;
        }

        .goods_info {
          .title {
            font-size: 0.875rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #3d3d3d;
            line-height: 1.375rem;
            padding: 0.5625rem 0.3125rem 0 0.3125rem;
          }

          .price {
            font-size: 0.75rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #f15712;
            padding: 0.5625rem 0 0.4375rem 0.3125rem;

            span {
              font-size: 1.125rem;

              display: inline-block;
            }
          }
        }
      }
    }

    .sc {
      position: absolute;
      top: -1.25rem;
      right: 2.125rem;
      display: flex;

      .sc1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.5rem;
        height: 2.5rem;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0px 0px 0.25rem 0px rgba(0, 0, 0, 0.2);

        img {
          width: 1.5rem;
          height: 1.5rem;
        }
      }

      .sc2 {
        margin-left: 0.6875rem;
      }
    }
  }

  .page_bg {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    z-index: 99;

    img {
      width: 12.5rem;
      height: 12.5rem;
      position: absolute;
      right: 1.875rem;
      display: block;
    }

    .hint {
      font-size: .875rem;
      padding-top: 12.5rem;
      text-align: center;
      color: #fff;
    }
  }
}
</style>